<template>
    <div class="container">
        <div class="profile">
            <div class="user-info" @click="!isLogin && goToLogin()">
                <img :src="userInfo.avatar" alt="头像" class="avatar" />
                <!-- avatar -->
                <div class="name">{{ isLogin ? userInfo.name : '点击登录' }}</div>
            </div>
            <div class="interview-info">
                <div class="time-count">
                    <div class="time">
                        <span class="count">{{ isLogin ? formatSeconds(userInfo.available_seconds) : '-' }}</span>
                        <div class="unit">我的面试时长(分钟)</div>
                    </div>
                    <div class="detail" @click="checkLogin(rechargeDetail)">
                        <span>查看明细</span>
                        <van-icon name="arrow" />
                    </div>
                </div>
                <div class="action-buttons">
                    <van-button type="default" @click="checkLogin(share)">分享好友</van-button>
                    <van-button type="default" class="recharge"
                        @click="checkLogin(() => router.push('/profile/recharge'))">
                        立即充值
                        <span class="recharge-tips">仅需5元</span>
                    </van-button>
                </div>
            </div>
            <div class="function-block">
                <div class="function-title">
                    常用功能
                </div>
                <div class="function-list">
                    <div class="function-item" @click="checkLogin(() => router.push('/profile/resume'))">
                        <img src="/images/mine/resume/resume-icon.png" />
                        <div class="function-name">我的简历</div>
                    </div>
                    <div class="function-item" @click="checkLogin(() => router.push('/profile/jobs'))">
                        <img src="/images/mine/jobs/interviews-icon.png" />
                        <div class="function-name">面试岗位</div>
                    </div>
                    <div class="function-item" @click="checkLogin(() => router.push('/profile/interviews'))">
                        <!-- <van-icon name="success-filled" color="#FF9700" size="24px" /> -->
                        <img src="/images/mine/resume/resume.png" />
                        <div class="function-name">面试结果</div>
                    </div>
                </div>

            </div>
            <div class="feedback-settings">
                <div class="item" @click="checkLogin(goFeedback)">
                    <div>用户反馈</div>
                    <van-icon name="arrow" />
                </div>
                <div class="item" @click="checkLogin(goSettings)">
                    <div>设置</div>
                    <van-icon name="arrow" />
                </div>
                <div class="item" @click="router.push('/profile/about/index')">
                    <div>关于</div>
                    <van-icon name="arrow" />
                </div>

                <div class="item" v-if="isLogin" @click="goLogout">
                    退出登录
                </div>
            </div>
        </div>
    </div>

</template>
<style lang="scss" scoped>
    .container {
        background: radial-gradient(61.87% 31.4% at 14.133333333333335% 10.467980295566502%, rgb(176, 213, 255) 0%, rgb(213 227 244) 100%);
        padding: 20px 16px;
        height: 100%;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .time {
        font-size: 16px;
    }

    .status img {
        width: 18px;
        height: 18px;
        margin-left: 5px;
    }

    .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        cursor: pointer;
    }

    .avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .name {
        font-size: 18px;
        font-weight: bold;
    }

    .interview-info {
        background-color: #fff;
        padding: 16px;
        border-radius: 10px;
        margin-bottom: 20px;
    }

    .time-count {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        justify-content: space-between;
        align-items: center;
    }

    .count {
        font-size: 36px;
        font-weight: bold;
        margin-right: 10px;
        color: #000000;
    }

    .unit {
        font-size: 14px;
        color: #666;
    }

    .action-buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .van-button {
            width: 45%;
            border-radius: 8px;
            background: rgba(242, 243, 245, 1);
            color: rgba(29, 33, 41, 1);
            font-weight: 500;
            height: 32px;
            line-height: 32px;
        }

        .recharge {
            position: relative;
        }

        .recharge-tips {
            position: absolute;
            top: -6px;
            left: 0px;
            line-height: 16px;
            font-size: 10px;
            color: rgba(255, 255, 255, 1);
            opacity: 1;
            padding: 2px;
            border-radius: 4px;
            background: linear-gradient(90deg, rgba(255, 59, 144, 1) 0%, rgba(255, 59, 82, 1) 100%);
        }
    }

    .function-block {
        background-color: #fff;
        padding: 16px;
        border-radius: 10px;
        margin-bottom: 20px;

        .function-list {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            color: rgba(29, 33, 41, 1);
        }

        .function-title {
            font-size: 16px;
            font-weight: 500;
            color: rgba(29, 33, 41, 1);
        }

    }

    .function-item {
        text-align: center;

        img {
            width: 24px;
            height: 24px;
            object-fit: contain;
        }
    }

    .function-name {
        font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
            'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
            sans-serif;
        font-size: 14px;
        color: #333;
        margin-top: 8px;
    }

    .feedback-settings {
        background-color: #fff;
        padding: 10px 16px;
        border-radius: 10px;

        .item {
            padding: 10px 0;
            border-bottom: 1px solid #E6E6E6;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #000000;
        }
    }

    .item:last-child {
        border-bottom: none;
    }
</style>

<script setup>
    import { computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useUserStore } from '@/store'
    import { formatSeconds } from '@/utils/untils'
    import { showToast } from 'vant'
    const router = useRouter()
    const userStore = useUserStore()
    const isLogin = ref(computed(() => userStore.loginStatus))
    //

    const userInfo = reactive({
        name: '',
        avatar: '/images/mine/ai-avatar.png',
        available_seconds: 0,
    })

    // 获取用户信息
    const getUserInfo = async () => {
        const res = await userStore.setUserInfo()
        if (res && res.code === 0 && res.data) {
            Object.assign(userInfo, res.data)
        }
    }

    // 登录检查函数
    const checkLogin = (callback) => {
        if (!isLogin.value) {
            goToLogin()
            return
        }
        callback()
    }

    const goToLogin = () => {
        router.push('/login')
    }
    // 跳转充值明细页面
    const rechargeDetail = () => {
        showToast('暂未开通')
        //router.push('/profile/recharge/detail')
    }

    // 模拟分享函数
    const share = () => {
        console.log('执行分享操作');
    };

    // 模拟跳转用户反馈页面函数
    const goFeedback = () => {
        console.log('跳转到用户反馈页面');
    };

    // 模拟跳转设置页面函数
    const goSettings = () => {
        console.log('跳转到设置页面');
    };

    // 模拟退出登录函数
    const goLogout = () => {
        userStore.logout()
        location.reload()
        console.log('退出登录');
    };
    onMounted(() => {
        getUserInfo()
    })
</script>